
<template>
  <div class='deptManage' >
      <el-row class='first-title'>
        <div class="lf">
            <div class="lf">
                <h3 class="">员工名册<small class="sub-title">{{this.$route.query.q}}</small></h3>
            </div>
        </div>
        <search-box @getValue="getSearchText" :text="text"></search-box>
      </el-row>
      <el-row class="second-sec">
          <div class="display-title">
            <el-radio-group v-model="radio3" @change="handleRadioChange" fill="#449d44" text-color="#fff">
              <el-radio-button label="员工名片">员工名片</el-radio-button>
              <el-radio-button label="员工列表" >员工列表</el-radio-button>
            </el-radio-group>
            <!--<div class="rt select-dept">
               <span>请选择部门：</span>
               <el-select  v-model="leaderSec" @change="getLeaderSecList" placeholder="请选择">
                  <el-option
                  v-for="item in unitList"
                  :key="item.deptid"
                  :label="item.descr"
                  :value="item.descr">
                  </el-option>
               </el-select>
            </div> -->
          </div>
          <!--<div class="switch-btn">
            <el-switch
                v-model="value1"
                on-text=""
                off-text=""
                on-color="#449d44"
                on-value="work"
                off-value="off-work"
                @change="selectWork"
            >
            </el-switch>正职
            <el-switch
                v-model="value2"
                on-text=""
                off-text=""
                on-color="#449d44"                
                on-value="leader-work"
                off-value="off-leader-work"
                @change="selectLeaderWork"
                >
            </el-switch>退居二线
            <el-switch
                v-model="value3"
                on-text=""
                off-text=""
                on-color="#449d44"
                on-value="retire"
                off-value="off-retire"
                @change="selectRetire"
                >
            </el-switch>内部退养
          </div>-->

      </el-row>

      <el-row class="third-card">
          <div class="totalNum">
              &nbsp;
              <div class="rt">共计<strong>{{totalNum}}</strong>人</div>
          </div>
          <div class="containerCard"  v-show="showCard">
             
                <div class="unitContainer" v-bind:style="{borderTopColor : 'blue'}" >
                    <!--<div class="collapse-card" >
                        <h3 class="box-title">
                            {{unit.c_lea_unit_name}}（共{{unit.num}}人）
                        </h3>
                        <div class="collapse-container pull-right">
                            <a v-if="unit.show" class="collapse" @click="collpseCard(unit)" data-widget="collapse"><i class="fa fa-minus"></i></a>
                            <a v-else class="collapse" @click="collpseCard(unit)" data-widget="collapse"><i class="fa fa-plus"></i></a>
                        </div>
                        
                    </div>-->
                    <transition name="slide-fade">
                      <div class="card-body">
                        <card-leader v-for='item in cardList' :personInfo='item' type="group"></card-leader>
                      </div>
                    </transition>

                </div>   
            
       
          </div>


          

          <div class="table-container" v-show="showTable">
            <div class="collapse-card">
                <h3 class="box-title">
                    员工列表（共{{totalNum}}人）
                </h3>
                <div class="collapse-container pull-right">
                    <a class="collapse" @click="collpseCard" ><i class="fa fa-minus"></i></a>
                </div>
            </div>
            <div class="handle-table">
               <a :href="downloadTable" class="downloadTable"><i class="fa fa-file-excel-o"></i> 导出简表</a>
               <div class="rt selectSet">
                  <!--<a href="" class="default alt" title="切换"><i class="fa fa-list-alt" aria-hidden="true"></i></a>-->
                  <a @click="showColList" class="default" title="自定义列"><i class="fa fa-th" aria-hidden="true"></i><span class="caret"></span></a>
                  <search-col :ifShow.sync='colShow' :checkedCities.sync="checkedCities" :cities="colTotalList" @changeCol="getCheckedArr"></search-col>
               </div>
            </div>

            <el-table
                :data="unitTableList"
                style="width: 100%"
                :fit="tablefit"
                :row-class-name="handleRowClass"
                >
                <el-table-column :prop="item.prop" :class-name="item.class" :label="item.label" :min-width="item.width" width="80" :key="item.prop" v-if="item.isShow" v-for='item in tableOption'>
                    <template  scope="scope">
                      <a v-if="item.needAtag" target="_blank" class="resumePeo"  @click="targetLeaderRoute(scope)">{{scope.row.name}}</a>
                      <span v-else>{{handleData(scope,item)}}</span>
                    </template>
                </el-table-column>          
            </el-table>

          <div class="block">
            <span class="displayShow">显示第 {{1+(currentPage-1)*pageSizeTable}} 到第 {{(currentPage-1)*pageSizeTable + totalTableNum}} 条记录，总共 {{totalNum}} 条记录</span>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-sizes="[10,20,50,100, 200]"
              :page-size.sync="pageSizeTable"
              layout="sizes,prev, pager, next"
              :total="totalNum">
              
            </el-pagination>
          </div>
        </div>
      </el-row>
  </div>
</template>

<script>
//   import 'Mock/mock_data'
  import Vue from 'vue'
  import { ButtonGroup,Switch,Select,Input, Col, Row, Radio,RadioGroup,RadioButton,Option, Table,TableColumn,Form,FormItem,Pagination} from 'element-ui' 
  Vue.use(ButtonGroup)
  Vue.use(Switch)
  Vue.use(Select)
  Vue.use(Input)
  Vue.use(Col)
  Vue.use(Row)
  Vue.use(Radio)
  Vue.use(RadioGroup)
  Vue.use(RadioButton)
  Vue.use(Option)
  Vue.use(Table)
  Vue.use(TableColumn)
  Vue.use(Form)
  Vue.use(FormItem)
  Vue.use(Pagination)


  import cardLeader from '@/components/public/card-memeber'
  import searchBox from '@/components/public/search-box'
  import searchCol from '@/components/public/selectShowCol'
    export default {
      data() {
        return {
          value1:null,
          value2:null,
          value3:null,
          radio3:'员工名片',
          unitList: [],
          leaderSec: '',
          loading:false,
          text:'请输入姓名、员工编号搜索',
          searchRecord:null,
          searchText:'',
          searchDeptCategory:'',
          deptDescr:null,
          deplid:null,
          setid:null,
          isLoadEnd:false,
        //   arrColor:[{color:'red'}],
        //   unitContainer:null,
          checkedCities:[0, 1, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
          colShow:false,
          cardList:[],
          showCard:true,
          totalNum:null,
          showTable:false,
          tablefit:true,
          englishTitle:null,
          title:null,
          tableOption:null,
          colTotalList:null,
          currentPage:1,
          pageSizeTable:10,
          totalTableNum:null,
          unitTableList:null,
          
          cardPageSize:30,
          cardPageNum:1,
        }
      },
      methods: {
        handle:function(scope){
          var emplid= scope.row.emplid;
          this.$router.push('/resume?emplid='+emplid);
        },
        targetLeaderRoute:function(scope){
          var emplid= scope.row.emplid;
          // window.location.href = "/module/resume.html?emplid="+emplid;
          window.open( "/module/resume.html?emplid="+emplid);
          // this.$router.push('/leaderconfirm?emplid='+emplid);
        },
        clearData:function(){
            // this.searchRecord = false;
            this.isLoadEnd = false;
            this.cardList = [];
            this.unitTableList = [];
            this.cardPageNum = 1;
            this.currentPage = 1;

        },
        selectAjax:function(){
            if (this.radio3 ==="员工名片") {
                if (this.searchRecord) {
                    var params = {
                        search:this.searchText,
                        pageSize:this.pageSizeTable,
                        pageNum:this.currentPage
                    }
                    this.PostAjax(this.URL.employeeSearch.url,params,3);    
                } else {
                    this.getLeaderListCommonAjax()
                }
            } else if (this.radio3 ==="员工列表") {
                if (this.searchRecord) {
                    var params = {
                        search:this.searchText,
                        pageSize:this.pageSizeTable,
                        pageNum:this.currentPage
                    }
                    this.PostAjax(this.URL.employeeSearch.url,params,3);    
                } else {
                    this.getLeaderListCommonAjax(2)
                }
            }

        },
        getSearchText:function(text){
          var self =this;
          if (!text.trim()) {
            //   this.cardList = [];
            //   this.totalNum = 0;
            //   this.cardPageNum = 1;
              this.clearData();
              this.searchRecord = false;
              this.selectAjax();
              return;
          }
          this.searchText = text;
          this.cardPageNum = 1;
          this.searchRecord = true;
          var params = {
            search:this.searchText,
            pageSize:40,
            pageNum:1,
          }
          this.PostAjax(this.URL.getEmployeeByListSearch.url,params,3);
        },
        handleRowClass:function(row, index){
          return index%2 === 0 ? 'even-row' : 'odd-row';
        },
        dataNeedFunc:function(prop){
            console.log(prop,"needFun");
            return prop === "service_dt" || prop === "birtc_cur_job_dthdate" || prop === "birthdate" || prop === "start_dt_chn";
        },
        handleData:function(scope,item){
          var prop = item.prop;
          switch (true) {
              case prop === 'num':
                  return (this.currentPage-1)*this.pageSizeTable + scope.$index+1;
                  break;
              case this.dataNeedFunc(prop):
                  console.log(prop,"prop");
                  var value = scope.row[item.prop].split(" ")[0];
                  return value;
                  break;
              default :
                  console.log(prop,"default");
                  return scope.row[item.prop];
          }
          
        },
        getCheckedArr:function(value){
          var arr = []
          value = JSON.parse(JSON.stringify(value));
          value.sort(function(a,b){
              return a - b;
          });
          for (var i=0,len=value.length;i<len;i++) {
              arr.push(this.colTotalList[value[i]]);          
          }
          
          this.tableOption = JSON.parse(JSON.stringify(arr));
          this.assignTitles();

        },
        concatStr:function(data){
            let ret = ''
            for (let it in data) {
                ret += it + '=' + data[it] + '&'
            }
            return ret;
        },
        assignTitles:function(){
          var title='',englishTitle='';
    			if (this.tableOption[0].prop !== "num") {
	      		 title += "序号";
	      	}
          for (var j=0;j<this.tableOption.length;j++){
            title = title ?  title + ',' + this.tableOption[j].label : title + this.tableOption[j].label;
            if (this.tableOption[j].prop !== "num") {
                englishTitle = englishTitle ? englishTitle = englishTitle + ',' + this.tableOption[j].prop : englishTitle + this.tableOption[j].prop;
            }
            
          }
          this.title = title;
          this.englishTitle = englishTitle;

        },
        handleRadioChange:function(value){
          this.clearData();
          if (value === "员工列表") {
              this.showCard = false;
              this.showTable = true;
              this.selectAjax();
            //   this.getLeaderListCommonAjax(2);
          } else if (value === "员工名片") {
              this.showCard = true;
              this.showTable = false;
              this.selectAjax();
            //   this.getLeaderListCommonAjax();
          }
        },
        showColList:function(){
            this.colShow = this.colShow ? false : true;
        },
        getLeaderSecList:function(value){
          var self =this;
          if (value === "全部") {
            value="";
            this.clearData();
          }
          this.clearData();
          this.leaderSec = value;
          var type;
          if (value) { type="1";}   
          this.getLeaderListCommonAjax(type);
        },
        collpseCard:function(unit){
          unit.show =  unit.show ? false : true; 
        },
        getLeaderListCommonAjax:function(type){
            var self = this;
            var params = type === 2 ?            
                  {
                    setid:this.setid,
                    selectname:this.searchText,
                    deplid:this.deplid,
                    pageSize:this.pageSizeTable ,
                    pageNum:this.currentPage
                  }
                  :
                  {
                    setid:this.setid,
                    selectname:this.searchText,
                    deplid:this.deplid,
                    pageSize:this.cardPageSize,
                    pageNum:this.cardPageNum
                  } ; 
                  this.PostAjax(this.URL.getEmployeeByList.url,params,type);
        },
        PostAjax:function(url,params,type){
            var self = this;
            if (type === 3) {
                this.searchRecord = true;
            } else {
                this.searchRecord = false;
            }
            this.Axios.Post(url,params).then(function(res){
  
                self.totalNum = res.data.total;

                var arr1 = JSON.parse(JSON.stringify(res.data.datas));
                if (type===2) {
                    
                    self.unitTableList = JSON.parse(JSON.stringify(arr1.depempList));
                    self.totalTableNum = self.unitTableList.length;
                } else {
                    if (self.searchRecord) {
                        self.cardList = arr1.depempList;
                    } else {
                        self.cardList = self.cardList.concat(arr1.depempList);
                        if (self.cardList.length === self.totalNum) {
                            self.isLoadEnd = true;
                        }
                    }
                   
                }               
            })
        },
        // type===2 代表简表请求
        handleSizeChange(val) {
            this.pageSizeTable = val;
            this.selectAjax();
            // this.getLeaderListCommonAjax(2);            
        },
        handleCurrentChange(val) {
          // console.log(this.currentPage);
            this.currentPage = val;
            this.selectAjax();
            // this.getLeaderListCommonAjax(2); 
        },
        scrollFunc:function(event) {
            var self = this;
            if (this.radio3 !=="员工名片" || this.searchRecord || this.isLoadEnd) {
                return;
            }
            var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 
            if(document.documentElement.scrollHeight - (document.documentElement.clientHeight + scrollTop) == 0 ) {
                self.cardPageNum++;
                self.selectAjax();
                // self.getLeaderListCommonAjax();
            }    
        }
      },
      computed:{
          downloadTable:function(){
            var params = {
                name:this.searchText,
                setid:this.setid,
                title:this.title,
                englishTitle:this.englishTitle
            }
            return this.Axios.baseURI +'/excel/departmentExport?'+ this.concatStr(params); 
          }
      },
      created:function(){
          var self = this;
          self.tableOption = [
            {label:'序号',prop:"num",isShow:true,width:'',needAtag:false},
            {label:'单位',prop:"business_descr",isShow:true,width:'',needAtag:false},
            {label:'ID',prop:"emplid",isShow:true,notChecked:true,width:'',needAtag:false},
            {label:'姓名',prop:"name",isShow:true,handle:true,needAtag:true},
            {label:'性别',prop:"sex_descr",isShow:true,class:'width40'},
            {label:'部门',prop:"dept_descr",isShow:true},
            {label:'职务',prop:"c_current_job",isShow:true},
            {label:'入职时间',prop:"service_dt",isShow:true,class:'width90',handle:true},
            {label:'任现职时间',prop:"c_cur_job_dt",isShow:true,class:'width90',handle:true},
            {label:'出生年月',prop:"birthdate",isShow:true,class:'width90',handle:true},
            {label:'政治面貌',prop:"political_sta_chn",isShow:true},
            {label:'参加工作时间',prop:"start_dt_chn",isShow:true,class:'width90',handle:true},
            {label:'最高学历',prop:"highest_edu",isShow:true},
            {label:'最高学位',prop:"highest_deg",isShow:true},
            {label:'毕业院校',prop:"school_descr",isShow:true},
            {label:'所学专业',prop:"major_descr",isShow:true}
          ];
          self.colTotalList = JSON.parse(JSON.stringify(self.tableOption));
          self.assignTitles();
      },
      mounted: function () {
        var self = this;
        this.setid = this.$route.query.setid || '';
        this.deplid = this.$route.query.deplid || '';
        // var params={
        //   employeeId:"",
        //   deptCategory:this.searchDeptCategory,
        //   deptDescr:this.leaderSec,
        //   name:this.searchText,
        //   page:{
        //     pageSize:24,
        //     pageNum:1
        //   }
        // }; 

        this.getLeaderListCommonAjax();
        // this.Axios.Post(this.URL.getDeptListByType.url,params).then(function(res){
        //     console.log(res,"unitList")
        //     var arr = res.data.datas;
        //     arr && arr.unshift({"descr":"全部","total":1,"deptid":""})
        //     self.unitList = res.data.datas;
        // })


        // document.body.addEventListener("scroll",function(){
        //     if(this.scrollHeight-this.scrollTop===this.clientHeight){
        //         console.log(this.scrollHeight,this.scrollTop,this.clientHeight);
        //     }
        //     console.log(this.scrollHeight,this.scrollTop,this.clientHeight);
        // })
        window.addEventListener("scroll",this.scrollFunc);
      },
      beforeDestroy: function () {
           window.removeEventListener("scroll",this.scrollFunc);
      },
      components: {
          cardLeader,
          searchBox,
          searchCol
      
      },
      watch:{
        $route:{
          handler : function(val, oldVal){
            var self = this;
            this.setid = this.$route.query.setid;
            this.deplid = this.$route.query.deplid;
            this.searchText = '';
            this.leaderSec = '';
            this.radio3 = '员工名片';
            this.cardPageSize = 30;
            this.cardPageNum = 1;
            this.currentPage = 1;
            this.pageSizeTable = 10;
            this.cardList = [];
            this.unitTableList = null;
            // var params={
            //   employeeId:"",
            //   deptCategory:this.searchDeptCategory,
            //   deptDescr:this.leaderSec,
            //   name:this.searchText,
              
            // }; 

            // if(this.searchDeptCategory === 'B'){this.isHide = true;} else if (this.searchDeptCategory === 'A') {this.isHide = false;}
            this.getLeaderListCommonAjax();

            // this.Axios.Post(this.URL.getDeptListByType.url,params).then(function(res){
            //     console.log(res,"unitList")
            //     var arr = res.data.datas;
                
            //     arr.unshift({"descr":"全部","total":1,"deptid":""})
            //     self.unitList = res.data.datas;
            // })
          }
        }
      },
      filters:{
          handleBirthdate:function(value){
              if (!value) {return}
              return value.split(' ')[0];
          },
          handleDate:function(value){
              if (!value) {return}
              return value.split(' ')[0].replace(/-/g,function(){return '.'});
          },
          handleWorkDate:function(value){
              if (!value) {return}
              return value.split(' ')[0].replace(/-/,function(){return '.'}).split('-')[0];
          }
        },
    }

</script>

<style scoped> 
      .deptManage .first-title h3{
          font-size: 24px;
          margin-top: 20px;
          margin-bottom: 20px;
          font-weight: 500;
          line-height: 1.1;
      }
     .deptManage .first-title h3 small{
        font-size: 65%;
        font-weight: normal;
        line-height: 1;
        color: #777;
        margin-left:5px;
      }
      .deptManage .second-sec{
          position: relative;
          border-radius: 3px;
          background: #ffffff;
          border-top: 3px solid #d2d6de;
          margin-bottom: 20px;
          width: 100%;
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
          border-top-color: #00a65a;
      }
      .content-right{
        float:right;
        margin-top:17px;
      }
      .deptManage .resumePeo{
        color:#00acd6;
        cursor: pointer;
      }
      .deptManage .select-dept{
        font-size: 14px;
      }
      .deptManage .display-title{
        border-bottom: 1px solid #f4f4f4;
        padding:10px;
      }
      .deptManage .switch-btn{
        padding: 10px 10px;
      }
      .deptManage .collapse-card{
        position:relative;
        padding: 10px 10px;
        border-bottom: 1px solid #f4f4f4;
      }

      .deptManage .table-container{
          position: relative;
          border-radius: 3px;
          background: #ffffff;
          border-top: 3px solid #d2d6de;
          margin-bottom: 20px;
          width: 100%;
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
          border-top-color: #00a65a;
          background-color:#fff;
      }
      .deptManage .unitContainer{
          position: relative;
          border-radius: 3px;
          background: #ffffff;
          border-top: 3px solid #3c8dbc;
          margin-bottom: 20px;
          width: 100%;
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
          overflow: hidden;
          clear: both;
      }
      .deptManage .third-card .collapse-card .box-title{
          display: inline-block;
          font-size: 18px;
          color: #444;
          font-weight: 500;
          margin: 0;
          line-height: 1;
      }
      .deptManage .third-card .collapse-card .collapse-container {
          position: absolute;
          right: 10px;
          top: 10px;
          cursor:pointer;
      }
      .deptManage .third-card .collapse-card  .collapse {
          border-radius: 3px;
          -webkit-box-shadow: none;
          box-shadow: none;
          border: 0px;
          padding: 5px;
          font-size: 12px;
          background: transparent;
          color: #97a0b3;
      }
      .totalNum{
          font-size: 14px;
          line-height: 1.42857143;
          color: #333;
      }


    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 90px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 100%;
    }



  /*选项icon样式*/
    .deptManage .handle-table{
      /*overflow: hidden;*/
      clear: both;
      padding:20px 20px 30px 20px;
      border-bottom: 1px solid #dfe6ec;
    }
    .deptManage .selectSet{
      font-size: 14px;
      font-weight: normal;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      clear: both;
      position: relative;
    }
    .deptManage .selectSet .default{
      float: left;
      background-color: #f4f4f4;
      color: #444;
      padding: 6px 12px;
      border: 1px solid #ddd;
      border-radius: 3px;
      position: relative;
      z-index:1;
    }
    .deptManage .selectSet .alt{
        margin-right:-1px;
        
    }
    .deptManage .selectSet a:hover{
      z-index:4;  
      color: #333;
      background-color: #e6e6e6;
      border-color: #adadad;
    }
    .deptManage .selectSet .alt{
        margin-right:-1px;
    }

    .selectSet .default:first-child:not(:last-child){
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        
    }
    .selectSet .default:last-child:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .deptManage .downloadTable{
      padding: 7px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: normal;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      background-color: #00acd6;
      border-color: #269abc;
      color: #fff;
      border-radius: 3px;
      display:inline-block;
    }
    .deptManage .downloadTable:hover{
      background-color: #3c8dbc;
      border-color: #00acd6;
    }
    
    .caret {
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: 2px;
      vertical-align: middle;
      border-top: 4px dashed;
      border-top: 4px solid \9;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
  }



    /* 可以设置不同的进入和离开动画 */
  /* 设置持续时间和动画函数 */
  .slide-fade-enter-active {
    transition: all .2s ease;
  }
  .slide-fade-leave-active {
    transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */ {
    transform: translateY(-10px);
    opacity: 0;
  }
  .deptManage .displayShow{
    display:inline-block;
    height:32px;
  }
  .deptManage .block{
    margin:15px 5px;
    line-height:32px;
  }    

</style>
<style>
    /*修改element-ui样式*/

  .deptManage .el-radio-button__inner:hover {
      color: #333;
  }
  .deptManage .el-radio-group .el-radio-button__inner:hover{
      background-color:#e7e7e7;
  }
  .deptManage .el-radio-group .el-radio-button__inner{
      background-color: #f4f4f4;
  }

  .deptManage .el-radio-group .is-active .el-radio-button__inner:hover{ 
        background-color: #d4d4d4 !important;
  }
  .deptManage .el-table th.gutter{
      display: none;
  }
  .deptManage .el-table th{
      white-space: nowrap;
      background-color: #fff;
      text-align: left;
  }
  .deptManage .el-table__header-wrapper thead div {
      background-color: #fff;
  }
  .deptManage .el-table__header-wrapper thead th>div.cell{
      padding-left: 0px;
      padding-right: 0px;
      text-align:center;
  }
  .deptManage .el-table__body-wrapper tr.el-table__row div.cell{
      padding-left: 0px;
      padding-right: 0px;
      text-align:center;
  }
  .deptManage .el-table{
    border:none;
  }
  .deptManage .el-table__body-wrapper table.el-table__body{
    width:100% !important;
    table-layout: auto;
  }
  .deptManage .el-table__header-wrapper .el-table__header{
    width:100% !important;
    table-layout: auto;
  }

  .deptManage .el-table .cell, .el-table th>div {
      padding-left: 0px;
      padding-right: 0px;
  }
  .deptManage .el-form--inline .el-form-item__label {
    width: 150px;
    float: none;
    display: inline-block;
  }
  .deptManage .el-pagination{
    display:inline-block;
  }
  .deptManage .el-table  tr td.width90, .deptManage .el-table  tr th.width90{
      min-width: 100px;
  }
  .deptManage .el-table  tr td.width40, .groupManage .el-table  tr th.width40{
      width: 40px;
  }
  .deptManage .el-table__empty-block{
    width:100% !important;
  }
</style>
